<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.25rem;
      }

      .top-text {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
      }

      .top-input {
        width: 400px;
      }

      .lable_text {
        text-align: right;
        width: 170px;
        font-size: 28px;
        letter-spacing: 10px;
        margin-bottom: 20px;
      }

      .top-input .el-input__wrapper {
        box-shadow: none;
        border-bottom: 1px solid #333;
        border-radius: 0;
        text-align: center;
      }

      .top-input .el-input__inner {
        text-align: center;
      }

      .top-text span {
        display: inline-block;
        font-size: 0.22rem;
        width: 1rem;
        text-align: justify;
        text-align-last: justify;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content text-left">
      <div class="text-center" style="font-size: 0.25rem; margin-bottom: 100px">盐城经泰州无锡常州至宜兴铁路站前工程</div>
      <div class="text-center mb-20" style="font-size: 0.25rem; letter-spacing: 15px; color: #315fc7">作业人员安全管理档案</div>
      <div class="w-100 flex-center" style="margin-bottom: 100px">
        <img src="./assets/image/img4.png" alt="" />
      </div>
      <div class="text-center mb-20" style="font-size: 0.25rem">中铁九局集团有限公司</div>
      <div class="text-center" style="font-size: 0.25rem; margin-bottom: 100px">盐宜铁路站前施工10标段项目经理部</div>

      <h3 class="top-text">
        <span>单位名称</span>
        <el-input class="top-input" placeholder=" " v-model="trainForm.unitName"></el-input>
      </h3>
      <h3 class="top-text">
        <span>工人姓名</span>
        <el-input class="top-input" placeholder=" " v-model="trainForm.name"></el-input>
      </h3>
      <h3 class="top-text">
        <span>工 种</span>
        <el-input class="top-input" placeholder=" " v-model="trainForm.type"></el-input>
      </h3>
      <h3 class="top-text">
        <span>入场时间</span>
        <el-input class="top-input" placeholder=" " v-model="trainForm.enteyTime" @input="onInput($event,'enteyTime')"></el-input>
      </h3>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const trainForm = ref({
            unitName: "",
            name: "",
            type: "",
            enteyTime: "",
          });

          window.setSign = (event) => {
            trainForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return trainForm.value;
          };
          window.setData = (data) => {
            trainForm.value.unitName = data.laborName;
            trainForm.value.name = data.name;
            trainForm.value.type = data.workTypeName;
            trainForm.value.enteyTime = data.year + "-" + data.month + "-" + data.day;
          };

          const onInput = (e, key) => {
            window.parent.postMessage(
              {
                key,
                isFill: e != "",
                form: "trainForm",
              },
              "*"
            );
          };

          //peopleForm.sign
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            onInput,
            trainForm,
            setUpEquipment,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
